/**
 * webpack配置
 */

//引入node内置模块,无需下载,直接引入
const path = require('path')

//处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//引入清除dist插件 
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

console.log(process.env.NODE_ENV);
//暴露webpack对象
module.exports = {
    target: 'web',

    //入口entry
    entry: {
        //公共样式
        comjs: './src/js/comjs.js',

        //公共js
        dom: './src/js/commonjs/dom.js',
        http: './src/js/commonjs/http.js',
        utils: './src/js/commonjs/utils.js',


        /* 插件js */
        captcha: './src/lib/captcha/captcha-mini.js',
        swiper: './src/lib/swiper/swiper.js',

        //页面js
        advert: './src/js/advert.js',
        password: './src/js/password.js',
        register: './src/js/register.js',

        home: './src/js/home.js',
        my: './src/js/my.js',
        sports: "./src/js/sports.js",

        edit: "./src/js/edit.js",


        ride: "./src/js/ride.js",
        course: "./src/js/course.js",
        courseDetail: "./src/js/courseDetail.js",


        player: "./src/js/player.js",


        sportstwo: "./src/js/sportstwo.js",

        sportdata: "./src/js/sportdata.js"

    },

    //出口output
    output: {
        path: path.resolve(__dirname, 'dist'), //出口路径
        filename: 'js/[name]-[hash:5].js',//输出文件名字
        publicPath: './'
    },

    //加载器loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },

            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader', 'less-loader']
            },

            {
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',  // 图片输出的名字hash长度16位 默认32位
                    limit: 24 * 1024,  // 小于10kb base64处理
                    esModule: false, //关闭es6模块化
                    outputPath: 'imgs'
                }
            },

            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },

            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },

            {
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            }
        ]
    },


    //插件plugins
    plugins: [
        //处理html
        new HtmlWebpackPlugin({
            template: './src/page/advert.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'advert.html',
            chunks: ['advert', 'dom', 'comjs']
        }),
        new HtmlWebpackPlugin({
            template: './src/page/password.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'password.html',
            chunks: ['password', 'dom', 'comjs', 'http', 'utils']
        }),
        new HtmlWebpackPlugin({
            template: './src/page/register.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'register.html',
            chunks: ['register', 'dom', 'comjs', 'http', 'captcha', 'utils']
        }),

        /* 主页 */
        new HtmlWebpackPlugin({
            template: './src/page/home.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'home.html',
            chunks: ['home', 'dom', 'comjs', 'http', 'utils', 'swiper']
        }),

        /* 我的 */
        new HtmlWebpackPlugin({
            template: './src/page/my.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'my.html',
            chunks: ['my', 'dom', 'comjs', 'http', 'utils']
        }),
        /* 运动 */
        new HtmlWebpackPlugin({
            template: './src/page/sports.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'sports.html',
            chunks: ['sports', 'dom', 'comjs', 'http', 'utils']
        }),

        /* 我的信息修改*/
        new HtmlWebpackPlugin({
            template: './src/page/edit.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'edit.html',
            chunks: ['edit', 'dom', 'comjs', 'http', 'utils']
        }),

        /* 骑行 */
        new HtmlWebpackPlugin({
            template: './src/page/ride.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'ride.html',
            chunks: ['ride', 'dom', 'comjs', 'http', 'utils']
        }),

        /* 课程 */
        new HtmlWebpackPlugin({
            template: './src/page/course.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'course.html',
            chunks: ['course', 'dom', 'comjs', 'http', 'utils']
        }),
        //课程详情
        new HtmlWebpackPlugin({
            template: './src/page/courseDetail.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'courseDetail.html',
            chunks: ['courseDetail', 'dom', 'comjs', 'http', 'utils']
        }),

        //课程详情之后要跳转的
        new HtmlWebpackPlugin({
            template: './src/page/player.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'player.html',
            chunks: ['player', 'dom', 'comjs', 'http', 'utils']
        }),


        /* 运动2 */
        new HtmlWebpackPlugin({
            template: './src/page/sportstwo.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'sportstwo.html',
            chunks: ['sportstwo', 'dom', 'comjs', 'http', 'utils']
        }),

        /* 运动数据 */
        new HtmlWebpackPlugin({
            template: './src/page/sportdata.html',  // 把index.html复制到dist中 自动引入资源文件
            filename: 'sportdata.html',
            chunks: ['sportdata', 'dom', 'comjs', 'http', 'utils']
        }),









        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),

        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        // 删除dist目录
        new CleanWebpackPlugin()

    ],


    //模式mode
    mode: process.env.NODE_ENV === 'dev' ? 'development' : 'production',

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        progress: true, //打包进度
        port: 9999,  // 端口
        open: true, // 自动打开浏览器
        openPage: 'advert.html', // 指定当前要打开页面的名字
        publicPath: '/' //服务器根目录
    },

}